<script setup>
import { ref, onMounted, toRefs, onUnmounted, nextTick } from 'vue'
import {unit2} from '../unit.js'
import link from '../link.js'

defineProps({
    config: Object,
});

const scroll = ref(null)

/**
 * 无缝循环滚动
 * @param elementId 要滚动的元素id
 * @param direction 滚动方向，'horizontal'为水平滚动，'vertical'为垂直滚动
 * @param childCount 克隆子元素数量 选填
  #scroll-loop {
    overflow: hidden;
  }
  #scroll-loop .scroll-content {
    display: flex;
    flex-direction: column;
  }

  .scroll-content 下必须只一个节点
 */
 function loopScroll(scrollDom, direction, childCount) {
    const scrollContainer = scrollDom || document.getElementById('marquee');

    const scrollContent = scrollContainer.firstElementChild;

    let scrollAmount = 0;
    let scrollSize = 0;
    let scrollStep = 1;
    let intervalId = null;

    if (direction === 'horizontal') {
        scrollContainer.style.whiteSpace = 'nowrap';
        scrollContent.style.flexDirection = 'row';
        scrollSize = scrollContent.firstElementChild.offsetWidth;
    } else {
        scrollSize = scrollContent.firstElementChild.offsetHeight;
    }

    if (!childCount) {
        // 克隆内容以实现无缝滚动
        scrollContent.innerHTML += scrollContent.innerHTML;
    } else {
        const children = scrollContent.children;
        for (let i = 0; i < childCount; i++) {
            const child = children[i].cloneNode(true);
            scrollContent.appendChild(child);
        }
    }

    function scrollUp() {
        if (direction === 'horizontal') {
            scrollAmount += scrollStep; // 横向滚动
            if (scrollAmount >= scrollSize) {
                scrollAmount = 0;
            }
            scrollContainer.scrollLeft = scrollAmount;
        } else {
            scrollAmount += scrollStep; // 竖向滚动
            if (scrollAmount >= scrollSize) {
                scrollAmount = 0;
            }
            scrollContainer.scrollTop = scrollAmount;
        }
    }

    function startScroll() {
        if (!intervalId) {
            intervalId = setInterval(scrollUp, 30);
        }
    }

    function stopScroll() {
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
        }
    }

    function clearEvent() {
        scrollContainer.removeEventListener('mouseleave', startScroll);
        scrollContainer.removeEventListener('mouseenter', stopScroll);
        stopScroll()
    }

    // 鼠标进入容器时停止滚动
    scrollContainer.addEventListener('mouseenter', stopScroll);
    // 鼠标离开容器时继续滚动
    scrollContainer.addEventListener('mouseleave', startScroll);

    // 初始化时开始滚动
    // startScroll();
    return {
        start: startScroll,
        stop: stopScroll,
        clear: clearEvent
    }
}

var marquee;
onMounted(() => {
    nextTick(() => {
        marquee = new loopScroll(scroll.value, 'horizontal');
        marquee.start();
    })
})
onUnmounted(() => {
    marquee && marquee.clear();
})

</script>

<template>

<div class="scroll-loop" ref="scroll" :style="{width: unit2(config.width, config.width_unit), height: unit2(config.height, config.height_unit), color: config.color, fontSize: unit2(config.fontSize) }" @click="link(config.link, config.link_null)">
    <div class="scroll-content">
        <div>{{ config.text }}</div>
    </div>
</div>

</template>

<style scoped>
  .scroll-loop {
    overflow: hidden;
  }
  .scroll-loop .scroll-content {
    display: flex;
    flex-direction: column;
  }
</style>